<template>
	<div id="register">
		<div id="form">
			<div id="topFlag">
				<span class="blue"></span>
				<span class="white"></span>
				<span class="blue"></span>
				<span class="white"></span>
				<span class="blue"></span>
			</div>
			<div id="content">
				<div class="input">
					<van-icon name="user" size="25"/>
					<input type="text" placeholder="请输入手机号码" v-model="user.phone">
				</div>
				<div class="input">
					<van-icon name="lock" size="25"/>
					<input type="password" placeholder="请输入密码" v-model="user.password">
				</div>
				<div class="input">
					<p id="forget">忘记密码？</p>
				</div>
				<div class="input">
					<van-button type="primary" round @click="toLogin()">登录</van-button>
				</div>
			</div>
		</div>
		<div>
			<div id="or">
				<p >OR</p>
			</div>
			<div style="display: flex; justify-content: center;">
				<van-button plain type="primary" round style="width: 80%;" @click="this.$router.push({path: '/register'})">没有账号，去注册</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { showSuccessToast, showFailToast,showToast } from 'vant';
	export default{
		data(){
			return{
				user:{
					phone:'',
					password:'',
				},
			}
		},
		methods:{
			toLogin(){
				if(this.user.phone.length == 0 || this.user.password.length == 0){
					showToast('用户账户填写错误！'); return;
				}
				this.$http.post(this.$api.USER_LOGIN,  this.user).then(result => {
					if(result.code == 200){
						localStorage.setItem("travel", result.body); 
						this.getUserInfo();
						this.$router.push({path: '/'}); return;
					}
					showFailToast("登陆失败");
				})
			},
			getUserInfo(){
				this.$http.get(this.$api.USER_BASIC_INFO).then(result => {
					console.log(result);
					if(result.code == 200){
						localStorage.setItem("userInfo", JSON.stringify(result.body));
					}else{
						showFailToast("用户信息获取失败");
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import "../../assets/css/register.css";
	#content{
		margin-top: 60px;
	}
	#topFlag{
		left: 10%;
	}
	#forget{
		color:gray;
		width:100%;
		text-align: right;
	}
</style>